import React, { Component } from 'react';
import './map.scss'
import StationItem from '../stationList/stationItem'
import { toComparators } from 'semver';
// import myInfoWindow from './myInfoWin'
import locla from '../../static/locla.png'
class Map extends Component {
    constructor(props) {
        super(props);
        this.state = {
            stationItem: null,
            up:[]
        }
    }
    render() {
        let that = this
        function Item() {
            if (that.state.stationItem) {
                return (
                    <div className='stationItem'>
                        {that.state.stationItem ? <StationItem item={that.state.stationItem} /> : ''}
                    </div>
                )
            } else {
                return ""
            }
        }
        return (<div className="mapTop">
            <div id="map"></div>
            <Item />
        </div>);
    }
    mapInit() {
        let TMap = window.TMap
        let that = this
        let center = new window.TMap.LatLng(that.props.storeList[0].lat, that.props.storeList[0].lot)
        let map = new window.TMap.Map(document.getElementById('map'), {
            zoom: 13,
            zoomControl: true,
            center: center
        });
        that.initInfoMarker(map,TMap)
    }
    initInfoMarker(map,TMap,id){
        let that =this
        let geometries = []
        let m_id=""
        that.props.storeList.map((item, idx) => {
            if(id){
                m_id = id
            }else{
                m_id = ""
                if(idx == 0){
                    m_id = item.id
                }else{
                    m_id = ""
                }
            }            
            geometries.push({
                id: item.id,  
                styleId: 'myStyle',  
                position: new TMap.LatLng(item.lat, item.lot),  
                content: item.name,
                properties: {
                    station: item
                }
            })
            // that.state.up[idx] = new myInfoWindow({
            //     map: map,
            //     position: new TMap.LatLng(item.lat, item.lot),
            //     content: item.plateformPrice,
            //     content2:item.name,
            //     id:m_id,
            //     stationId:item.id
            // })
        })
        console.log(that.state.up)
        var markerLayer = new window.TMap.MultiMarker({
            id: 'label-layer',
            map: map,
            styles: {
                myStyle: new TMap.MarkerStyle({
                    width: 30,  
                    height: 36, 
                    src: locla,  
                    anchor: { x: 16, y: 32 }
                }),

            },

            geometries: geometries,

        })

        markerLayer.on('click',function(ev){
            that.setState({
                stationItem: ev.geometry.properties.station
            })
            that.state.up.map(item=>{
                item.destroy()
            })
            markerLayer.setMap(null);
            markerLayer = null;
           
            that.initInfoMarker(map,TMap,ev.geometry.properties.station.id)
        })
    }
    componentDidMount() {
       
        this.mapInit()
    }

}

export default Map;
